<template>
  <view class="container">
    <!-- 订单列表 -->
    <scroll-view 
      scroll-y 
      class="order-list-scroll"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="order-list" v-if="orders.length > 0">
        <view 
          class="order-item" 
          v-for="(order, index) in orders" 
          :key="index"
          @tap="goToOrderDetail(order.id)"
        >
          <view class="order-header">
            <view class="order-no">订单号：{{ order.orderNo }}</view>
            <view class="order-status" :class="'status-' + order.status">{{ getStatusText(order.status) }}</view>
          </view>
          
          <view class="order-content">
            <view class="product-summary">
              <image :src="order.products[0].image" class="product-img" mode="aspectFill"></image>
              <view class="order-info">
                <view class="product-name">{{ order.products[0].name }}{{ order.products.length > 1 ? ' 等' + order.products.length + '件商品' : '' }}</view>
                <view class="order-time">{{ order.createTime }}</view>
              </view>
            </view>
            <view class="order-amount">
              <text>实付：</text>
              <text class="price">¥{{ (order.actualAmount / 100).toFixed(2) }}</text>
            </view>
          </view>
          
          <view class="order-actions" v-if="order.status === 'pending'">
            <button class="action-btn btn-primary" @tap.stop="payOrder(order.id)">立即支付</button>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="orders.length === 0">
        <image src="/static/images/common/empty.png" class="empty-image" mode="aspectFit"></image>
        <view class="empty-text">暂无订单</view>
        <button class="go-shopping-btn" @tap="goShopping">去逛逛</button>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading-more" v-if="loading && orders.length > 0">
        <view class="loading-icon"></view>
        <text>加载中...</text>
      </view>
      
      <!-- 没有更多数据 -->
      <view class="no-more" v-if="!hasMore && orders.length > 0">
        <text>没有更多订单了</text>
      </view>
      
      <!-- 底部安全区域占位 -->
      <view class="safe-area-inset-bottom"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        {
          id: '1',
          orderNo: 'XM202403120001',
          status: 'shipping',
          createTime: '2024-03-12 14:30:25',
          products: [
            {
              id: 1,
              image: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
              name: '喜茶 多肉葡萄',
              specs: '中杯，常规冰，常规糖',
              price: 2900,
              number: 1
            },
            {
              id: 2,
              image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
              name: '喜茶 芝芝莓莓',
              specs: '大杯，少冰，少糖',
              price: 3200,
              number: 2
            }
          ],
          productAmount: 9300,
          freight: 600,
          couponDiscount: 1000,
          actualAmount: 8900
        },
        {
          id: '2',
          orderNo: 'XM202403110002',
          status: 'pending',
          createTime: '2024-03-11 10:15:30',
          products: [
            {
              id: 3,
              image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
              name: '喜茶 满杯红柚',
              specs: '大杯，少冰，少糖',
              price: 2800,
              number: 1
            }
          ],
          productAmount: 2800,
          freight: 600,
          couponDiscount: 0,
          actualAmount: 3400
        },
        {
          id: '3',
          orderNo: 'XM202403100003',
          status: 'completed',
          createTime: '2024-03-10 16:45:12',
          products: [
            {
              id: 4,
              image: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
              name: '喜茶 多肉葡萄',
              specs: '中杯，常规冰，常规糖',
              price: 2900,
              number: 2
            }
          ],
          productAmount: 5800,
          freight: 600,
          couponDiscount: 500,
          actualAmount: 5900
        },
        {
          id: '4',
          orderNo: 'XM202403090004',
          status: 'paid',
          createTime: '2024-03-09 09:20:45',
          products: [
            {
              id: 5,
              image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
              name: '喜茶 芝芝莓莓',
              specs: '大杯，少冰，少糖',
              price: 3200,
              number: 1
            }
          ],
          productAmount: 3200,
          freight: 600,
          couponDiscount: 0,
          actualAmount: 3800
        }
      ],
      page: 1,
      pageSize: 10,
      hasMore: true,
      loading: false,
      refreshing: false
    }
  },
  onLoad() {
    // 获取订单列表
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    getOrderList(reset = false) {
      if (reset) {
        this.orders = []
        this.page = 1
      }
      
      this.loading = true
      
      // 模拟API请求
      setTimeout(() => {
        // 实际项目中应该调用API获取订单列表
        // const params = {
        //   page: this.page,
        //   pageSize: this.pageSize
        // }
        // this.$api.getOrderList(params).then(res => {
        //   if (reset) {
        //     this.orders = res.data.list
        //   } else {
        //     this.orders = [...this.orders, ...res.data.list]
        //   }
        //   this.hasMore = res.data.hasMore
        //   this.loading = false
        //   this.refreshing = false
        // })
        
        // 模拟数据
        this.loading = false
        this.refreshing = false
        
        // 模拟没有更多数据
        if (this.page > 1) {
          this.hasMore = false
        }
      }, 1000)
    },
    
    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.page++
        this.getOrderList()
      }
    },
    
    // 下拉刷新
    onRefresh() {
      this.refreshing = true
      this.getOrderList(true)
    },
    
    // 获取订单状态文本
    getStatusText(status) {
      const statusMap = {
        pending: '待付款',
        paid: '待发货',
        shipping: '配送中',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 跳转到订单详情
    goToOrderDetail(orderId) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${orderId}`
      })
    },
    
    // 支付订单
    payOrder(orderId) {
      uni.navigateTo({
        url: `/pages/pay/index?orderId=${orderId}`
      })
    },
    
    // 去购物
    goShopping() {
      uni.switchTab({
        url: '/pages/category/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/common/theme.scss';

.container {
  min-height: 100vh;
  background: $bg-main;
  padding: 0;
}

.order-list-scroll {
  height: 100vh;
}

.order-list {
  padding: 20rpx;
}

.order-item {
  background: $bg-white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba($primary-pink, 0.05);
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid rgba($primary-light-pink, 0.1);
    
    .order-no {
      font-size: 26rpx;
      color: $primary-light-pink;
    }
    
    .order-status {
      font-size: 26rpx;
      font-weight: bold;
      
      &.status-pending {
        color: #FF9800;
      }
      
      &.status-paid {
        color: #2196F3;
      }
      
      &.status-shipping {
        color: #3F51B5;
      }
      
      &.status-completed {
        color: #4CAF50;
      }
      
      &.status-cancelled {
        color: #F44336;
      }
    }
  }
  
  .order-content {
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .product-summary {
      display: flex;
      align-items: center;
      
      .product-img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 0;
        background: #f5f5f5;
      }
      
      .order-info {
        margin-left: 20rpx;
        
        .product-name {
          font-size: 28rpx;
          color: $primary-dark-pink;
          margin-bottom: 10rpx;
        }
        
        .order-time {
          font-size: 24rpx;
          color: $primary-light-pink;
        }
      }
    }
    
    .order-amount {
      font-size: 26rpx;
      color: $primary-light-pink;
      
      .price {
        color: #FF5252;
        font-weight: bold;
      }
    }
  }
  
  .order-actions {
    padding: 0 30rpx 20rpx;
    display: flex;
    justify-content: flex-end;
    
    .action-btn {
      min-width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 0;
      font-size: 26rpx;
      padding: 0 30rpx;
      
      &.btn-primary {
        background: $gradient-button;
        color: $bg-white;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: $primary-light-pink;
    margin-bottom: 40rpx;
  }
  
  .go-shopping-btn {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: $gradient-button;
    color: $bg-white;
    font-size: 28rpx;
    border-radius: 0;
  }
}

.loading-more,
.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  font-size: 24rpx;
  color: $primary-light-pink;
  
  text {
    margin-left: 10rpx;
  }
  
  .loading-icon {
    width: 30rpx;
    height: 30rpx;
    border: 2rpx solid $primary-light-pink;
    border-radius: 50%;
    border-top-color: transparent;
    animation: loading 0.8s linear infinite;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 底部安全区域占位 */
.safe-area-inset-bottom {
  height: env(safe-area-inset-bottom);
  padding-bottom: 20rpx;
}
</style>
